export const useNvm: string =
    `
## 卸载node

### windows

进入添加和删除程序进行卸载

### mac

https://www.jianshu.com/p/88cd55296983

## 下载安装 nvm

### windows

链接: https://pan.baidu.com/s/1uoxlk8CVNHV2KTCwIGbQMQ?pwd=yi5m 

提取码: yi5m 

### mac

修改 HOSTS（建议使用 SwitchHosts）

\`\`\`javascript
? raw.githubusercontent.com
? objects.githubusercontent.com
? pkg-containers.githubusercontent.com
\`\`\`

> ？位置需要通过 https://www.ipaddress.com/ 查询 ip

打开终端运行下面的命令

\`\`\`shell
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
\`\`\`

## nvm 的基本使用

\`\`\`shell
# 查看当前安装和使用的 node 版本
nvm list

# 安装某个 node 版本
nvm install 版本号

# 切换 node 版本
nvm use 版本号

# 设置默认版本
nvm alias v12.22.12
\`\`\`
`

export const vscode: string =
    `> 1 注释 单行注释：【ctrl+k,ctrl+c】或者 ctrl+1
> 取消单行注释：【Ctrl+k,ctrl+u】按下 ctrl 不放，再按 k+u
> 多行注释：【alt+shift+a】或者/\\*\\*

> 2 移动行：alt+up/down

> 3 显示或隐藏左侧目录栏 ctrl+b

> 4 复制当前行：shift+alt+up/down

> 5 删除当前行： shift+ctrl+k

> 6 控制台终端显示与隐藏：ctrl+c

> 7 查找文件或者安装 vscode 插件地址： ctrl+p

> 8 代码格式化：shift+alt+f

> 9 新建一个窗口：ctrl+shift+n

> 10 行增加缩进：ctrl+[

> 11 行减少缩进：ctrl+]

> 12 裁剪尾随空格（去掉一行的末尾那些没用的空格）：ctrl+shiftl+x

> 13 字体放大或缩小：ctrl+(+或-)

> 14 拆分编辑器：ctrl+1/2/3

> 15 切换窗口：ctrl+shift+left/right

> 16 关闭编辑器窗口：ctrl+w

> 17 关闭所有窗口：ctrl+k+w

> 18 切换全屏：f11

> 19 自动换行：alt+z

> 20 显示 git:ctrl+shift+g

> 21 全局查找文件：ctrl+p

> 22 显示相关插件的命令： （如 git log）:ctrl+shift+p

> 23 选中文字：shift+left/right+up/down

> 24 折叠代码：ctrl+k+0-9(0 是完全折叠)

> 25 展开代码： ctrl+k+j(完全展开代码)

> 26 删除行：ctrl+shift+k

> 27 快速回到主题：ctrl+k/ctrl+t

> 28 快速回到顶部： ctrl+home

> 29 快速回到尾部：ctrl+end

> 30 格式化选定代码： ctrl+k/ctrl+f

> 31 选中代码：shift+鼠标左键

> 32 多行同时添加内容（光标）：ctrl+alt+up/down

> 33 全局替换：ctrl+shift+h

> 34 当前文件替换：ctrl+n

> 35 打开最近打开的文件：ctrl+r

> 36 打开最新的命令窗：ctrl+shift+c
`

export const webTool: string =
    `- 前端零代码工具箱

> https://www.lingdaima.com/

- 前端动画库

> https://animxyz.com/docs#utilities

- 100 天学会 css 动画

> https://100dayscss.com/

- css 文章

> https://css-tricks.com/

- 前端题目

> https://www.30secondsofcode.org/

- 前端必学

> https://github.com/stephentian/33-js-concepts#12-promise

- 怎么去解决 javascript 中奇怪的问题

> https://github.com/denysdovhan/wtfjs/blob/master/README-zh-cn.md

- 深度学习 javascript

> https://github.com/rohan-paul/Awesome-JavaScript-Interviews

- 速查 javascript

> https://quickref.me/javascript

- 深如学习

> https://github.com/airbnb/javascript

- 动画库

> https://cssfx.netlify.app/

- 图解计算机

> https://xiaolincoding.com/

- 贝塞尔曲线在线演示

> https://cubic-bezier.com/?spm=a2c6h.12873639.article-detail.5.64ce1152Zft2BA#0,0,1,1

- Typescript使用手册

> http://www.patrickzhong.com/TypeScript/zh/handbook/basic-types.html`

export const less: string =
    `

# 什么是Less？

**Less**是一种更加简洁的样式代码，它非常像CSS，但又不太一样，它让编写样式变得更容易

下面是css代码和Less代码的对比，它们都表达了一样的含义

![image-20210507125034131](http://mdrs.yuanjin.tech/img/20210507125034.png)

**Less代码虽好，但它无法被浏览器识别**，因此需要一个工具将其转换为血统纯正的css代码

由于**node环境具有读写文件的能力**，于是在node环境中可以轻松的完成文件的转换

\`npm\`上有一个包叫做\`less\`，它运行在node环境中，通过它可以完成对Less代码的转换

<img src="http://mdrs.yuanjin.tech/img/20210507105107.png" alt="image-20210507105107556" style="zoom:50%;" />

**可以看出，node环境在前端工程化中，充当了一个辅助的角色，它并不直接运行前端代码，而是让我们编写前端代码更加舒适便利，在后续的课程中，你还会不断的体会到这一点**

**转换代码，称之为编译(compile)，转换代码的工具，称之为编译器(compiler)**

# 体验Less

1. 新建\`index.less\`文件，编写下面的\`less\`代码

   \`\`\`less
   @green: #008c8c;
   .list {
     display: flex;
     flex-wrap: wrap;
     color: @green;
     li {
       margin: 1em;
       &:hover {
         background: @green;
         color: #fff;
       }
     }
   }
   \`\`\`

2. 使用\`npm\`下载\`less\`

   \`less\`包提供了一个\`cli\`工具\`lessc\`，你可以有两种方案使用它

   **方案一：全局安装less**

   这种方案可以让你在任何终端目录使用\`lessc\`命令，但不利于版本控制

   **方案二：本地安装less**

   这种方案会把\`less\`安装到工程目录的\`node_modules\`中，你无法全局使用\`lessc\`命令，但可以在当前工程目录中使用\`npx lessc\`运行该命令

   > npx是npm提供的一个小工具，它可以运行当前项目中安装到node_modules的cli命令
   >
   > 如果配置\`package.json\`脚本，无须使用\`npx\`
   >
   > 如果可以，应该尽量使用本地安装，而非全局安装

   如果可以，应该尽量使用本地安装，而非全局安装

3. 使用\`lessc\`命令，对编写的\`less\`文件进行编译

   \`\`\`shell
   # 将 index.less 编译成为 index.css
   lessc index.less index.css
   \`\`\`

4. 新建一个页面，引用编译结果\`index.css\`

> 目前，编写less代码会遇到一点小麻烦，就是每次编写后，都需要运行命令进行编译
>
> 这个麻烦只是暂时的，将来很快就可以解决

# Less的核心语法

>Less官网：https://lesscss.org/
>
>Less民间中文网：https://less.bootcss.com/

Less提供了非常多的功能，帮助我们更加轻松的编写css代码

其中，我们最常用的功能有下面3个：

- [变量](https://less.bootcss.com/#%E5%8F%98%E9%87%8F%EF%BC%88variables%EF%BC%89)
- [嵌套](https://less.bootcss.com/#%E5%B5%8C%E5%A5%97%EF%BC%88nesting%EF%BC%89)
- [混合](https://less.bootcss.com/#%E6%B7%B7%E5%90%88%EF%BC%88mixins%EF%BC%89)

另外，你需要关注Less的特殊[注释](https://less.bootcss.com/#%E6%B3%A8%E9%87%8A%EF%BC%88comments%EF%BC%89)

`

export const npm: string =
    `npm官网：https://www.npmjs.com/

npm全命令：https://docs.npmjs.com/cli/v7/commands

# 概念

1. 什么是**包**？

   包（package）是一个或多个js模块的集合，它们共同完成某一类功能

   可以简单的认为每一个工程就是一个包

   有些包是为了给别人用的，这种包也叫第三方库

2. 什么是**包管理器**？

   包管理器是一个管理包的工具，前端常见的包管理器有npm、yarn、cnpm、pnpm等

   包管理器具备以下能力：

   - 让开发者可以轻松的下载包
   - 让开发者可以轻松的升级和卸载包
   - 能够自动管理包的依赖

3. 什么是**cli**

   cli是一个命令行工具，它提供一个终端命令，通过该命令可以完成一些功能

# node查找包的顺序

\`\`\`js
require("a")
\`\`\`

1. 查找是否有内置模块a
2. 查找当前目录的node_modules中是否有a
3. 依次查找上级目录的node_modules中是否有a，直到根目录

# 配置源

## 查看源

\`\`\`shell
npm config get registry
\`\`\`

## 配置淘宝镜像源

\`\`\`shell
npm config set registry https://registry.npm.taobao.org
\`\`\`

## 配置官方源

\`\`\`shell
npm config set registry https://registry.npmjs.org/
\`\`\`

# 初始化

\`\`\`shell
npm init # 初始化工程，帮助生成 package.json 文件
npm init -y # 初始化工程，全部使用默认配置生成 package.json 文件
\`\`\`

# package.json

\`\`\`json
{
  "dependencies": { // 本地普通依赖
    "qrcode": "^1.4.4" // 依赖包qrcode，版本1.4.4，主版本号不变，此版本号和补丁版本可增
  },
  "devDenpendencies": { // 开发依赖
    "webpack": "^5.0.0" 
  }
}
\`\`\`

# 安装

## 本地安装

会将包下载到当前命令行所在目录的node_modules中

绝大部分安装都使用本地安装

\`\`\`shell
# 下面的 install 可以替换为 i
npm install 包名
npm install --save 包名
npm install 包名@版本号
\`\`\`

若仅作为开发依赖，则添加参数\`-D\`

\`\`\`shell
# 下面的 install 可以替换为 i
npm install -D 包名
npm install -D 包名@版本号
\`\`\`

若要还原安装

\`\`\`shell
# 下面的 install 可以替换为 i
npm install
npm install --production # 仅还原dependencies中的依赖
\`\`\`

## 全局安装

会将包下载到一个全局的位置

只有需要使用某个全局命令时，才需要进行全局安装

\`\`\`shell
# 下面的 install 可以替换为 i
npm install -g 包名
npm install -g 包名@版本号
\`\`\`

# 卸载

## 本地卸载

卸载本地的安装包

\`\`\`shell
# 下面的 uninstall 均可替换为 un
npm uninstall 包名
\`\`\`

## 全局卸载

卸载全局的安装包

\`\`\`shell
# 下面的 uninstall 均可替换为 un
npm uninstall -g 包名
\`\`\`

# 查看包信息

## 查看包所有的版本

\`\`\`shell
# view 可以替换为 v
npm view 包名 versions
\`\`\`

`

export const modularization: string =
    `# CommonJS

> 标准类型：社区规范
>
> 支持环境：node
>
> 依赖类型：动态依赖

## 如何导出

\`\`\`js
module.exports = 导出的值
\`\`\`

## 如何导入

\`\`\`js
require("模块路径") // 函数返回模块导出的值
\`\`\`

# ES Module

> 标准类型：官方标准
>
> 支持环境：node，浏览器
>
> 依赖类型：静态依赖，动态依赖

## 如何导出

**ES Module**的导出

ES Module分为两种导出方式：

- 具名导出（普通导出），可以导出多个
- 默认导出，只能导出一个

一个模块可以同时存在两种导出方式，最终会合并为一个「对象」导出

\`\`\`js
export const a = 1; // 具名，常用
export function b() {} // 具名，常用
export const c = () => {}  // 具名，常用
const d = 2;
export { d } // 具名
const k = 10
export { k as temp } // 具名

// export default 3 // 默认，常用
// export default function() {} // 默认，常用
// const e = 4;
// export { e as default } // 默认

const f = 4, g = 5, h = 6
export { f, g, h as default} // 基本 + 默认

// 以上代码将导出下面的对象
/*
{
\ta: 1,
\tb: fn,
\tc: fn,
\td: 2,
\ttemp: 10,
\tf: 4,
\tg: 5,
\tdefault: 6
}
*/
\`\`\`

**注意：导出代码必须为顶级代码，即不可放到代码块中**

## 如何导入

针对具名导出和默认导出，有不同的导入语法

\`\`\`js
// 仅运行一次该模块，不导入任何内容
import "模块路径"
// 常用，导入属性 a、b，放到变量a、b中。a->a, b->b
import { a, b } from "模块路径"   
// 常用，导入属性 default，放入变量c中。default->c
import c from "模块路径"  
// 常用，default->c，a->a, b->b
import c, { a, b } from "模块路径" 
// 常用，将模块对象放入到变量obj中
import * as obj from "模块路径" 


// 导入属性a、b，放到变量temp1、temp2 中
import {a as temp1, b as temp2} from "模块路径" 
// 导入属性default，放入变量a中，default是关键字，不能作为变量名，必须定义别名
import {default as a} from "模块路径" 
//导入属性default、b，放入变量a、b中
import {default as a, b} from "模块路径" 
// 以上均为静态导入

import("模块路径") // 动态导入，返回一个Promise，完成时的数据为模块对象
\`\`\`

**注意：静态导入的代码必须为在代码顶端，也不可放入代码块中**

**另外，静态导入的代码绑定的符号是常量，不可更改**`

export const basics: string =
    `![](https://www.onely.com/wp-content/uploads/blog/2020/Ultimate_Guide_JS_SEO_2020_Edition/003-chapter1-html-css-js-chart.jpg)
 1. **HTML** 就像汽车的结构框架：**HTML** 类似于汽车的骨架，它定义了网页的基本结构和组成部分，就像汽车的框架定义了车辆的整体形状和结构。**HTML** 元素就像汽车的各个零部件，它们组成了页面的基本结构，就像汽车的零件组成了车辆的整体。
 2. **CSS** 就像汽车的外观和装饰：**CSS** 类似于汽车的外观设计和装饰，它定义了网页的样式和外观，就像汽车的颜色、涂饰和装饰定义了汽车的外观。通过 **CSS**，可以美化页面，调整元素的大小、颜色、字体等，就像汽车可以通过喷漆和装饰品来改变外观一样。
 3. **JavaScript** 就像汽车的引擎和控制系统：**JavaScript** 类似于汽车的引擎和控制系统，它为网页添加了交互和动态功能，就像汽车的引擎为车辆提供了动力和控制一样。通过 **JavaScript**，可以实现页面的动态效果、交互功能和响应用户操作，就像汽车的引擎控制着车辆的运动和行为一样。
 4. 综上所述，**HTML** 提供了网页的基本结构，就像汽车的骨架；**CSS** 美化了页面的外观，就像汽车的外观设计；而 **JavaScript** 为网页添加了动态功能和交互，就像汽车的引擎和控制系统。这三者合作，共同构建出了丰富多彩的 Web 页面，就像汽车的结构、外观和功能共同塑造了一辆完整的汽车一样。
`

export const Fibonacci: string =
    `1. 使用 TypeScript 实现斐波那契数列时，可以通过递归或循环的方式实现。以下是使用 TypeScript 实现斐波那契数列的两种方法：

   ### 方法一：使用递归

   \`\`\`ts
   function fibonacciRecursive(n: number): number {
       if (n <= 1) {
           return n;
       } else {
           return fibonacciRecursive(n - 1) + fibonacciRecursive(n - 2);
       }
   }
   
   // 测试
   const n = 10;
   console.log(\`第 \${n} 位的斐波那契数列值为：\${fibonacciRecursive(n)}\`);
   \`\`\`
![](https://th.bing.com/th/id/OIP.REgc_Hl_SlhsFIQTwzqLRAHaFj?rs=1&pid=ImgDetMain)
   ### 方法二：使用循环

   \`\`\`ts
   function fibonacciIterative(n: number): number {
       let a = 0;
       let b = 1;
       let temp;
       if (n === 0) return a;
       if (n === 1) return b;
       for (let i = 2; i <= n; i++) {
           temp = a + b;
           a = b;
           b = temp;
       }
       return b;
   }
   
   // 测试
   const n = 10;
   console.log(\`第 \${n} 位的斐波那契数列值为：\${fibonacciIterative(n)}\`);
   \`\`\`

   ### 原理解释

   1. **递归方法**：
      - 当 n 小于等于 1 时，斐波那契数列的值就是 n 本身。
      - 当 n 大于 1 时，递归地调用自身，计算第 n 位的斐波那契数列值等于第 n-1 位和第 n-2 位的值之和。
   2. **循环方法**：
      - 使用两个变量 a 和 b 来存储斐波那契数列中的前两个数。
      - 初始化 a 为 0，b 为 1。
      - 从第 2 位开始循环，每次迭代，计算下一个数的值，并更新 a 和 b 的值为前两个数的值。
      - 循环直到计算到第 n 位，返回对应的值。

   递归方法简洁但可能效率较低，因为在计算时会有很多重复的计算，而循环方法则避免了这种重复计算，因此在实际应用中往往更有效率。
`

export const vue: string =
    `## **Vue.js** 的特性时，我们通常会提到以下几个方面：

- **响应式数据绑定**：Vue.js 提供了一种简洁的方法来处理应用的状态。当数据发生变化时，相关的 DOM 自动更新。
- **组件化**：Vue.js 采用组件化的思想，允许开发者将 UI 拆分成独立、可复用的组件，从而简化复杂应用的开发和维护。
- **虚拟 DOM**：Vue.js 使用虚拟 DOM 技术来最小化 DOM 操作，从而提高性能。通过比较前后两个虚拟 DOM 的差异，只对需要更新的部分进行实际 DOM 操作。
- **指令**：Vue.js 提供了一些内置指令，如 \`v-bind\`、\`v-if\`、\`v-for\` 等，用于简化常见的 DOM 操作。
- **插件系统**：Vue.js 的插件系统允许开发者扩展其核心功能。通过插件，可以添加全局功能、指令或过滤器。
- **路由**：Vue.js 提供了官方的路由器（Vue Router），用于构建单页面应用程序中的路由。
- **状态管理**：Vue.js 可以与其他状态管理库（如 Vuex）结合使用，以管理应用程序的状态。

下面是一个简单的 Vue.js 示例，展示了数据绑定、组件化和指令的使用：

\`\`\`html
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
    <h1>{{ message }}</h1>
    <button v-on:click="reverseMessage">Reverse Message</button>
    <custom-component></custom-component>
</div>

<script>
    // 定义一个全局组件
    Vue.component('custom-component', {
        template: '<p>This is a custom component!</p>'
    });

    // 创建一个 Vue 实例
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('');
            }
        }
    });
</script>

</body>
</html>
\`\`\`

在这个示例中，我们定义了一个 Vue 实例 \`app\`，它有一个数据属性 \`message\`，在页面中使用双花括号插值语法 \`{{ message }}\` 将数据绑定到了一个标题元素上。点击按钮时，调用了 \`reverseMessage\` 方法，该方法用于反转 \`message\` 的内容。同时，我们也定义了一个全局组件 \`custom-component\`，并在 Vue 实例中引入并使用了它。
`

export const PromiseNote: string =
    `# Promise


**\`Promise\`** 对象表示异步操作最终的完成（或失败）以及其结果值。

若想了解 promise 的工作方式以及如何使用它们，我们建议你先阅读[使用 Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises)。

## [描述](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#描述)

一个 **\`Promise\`** 是一个代理，它代表一个在创建 promise 时不一定已知的值。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来。这使得异步方法可以像同步方法一样返回值：异步方法不会立即返回最终值，而是返回一个 *promise*，以便在将来的某个时间点提供该值。

一个 \`Promise\` 必然处于以下几种状态之一：

- *待定（pending）*：初始状态，既没有被兑现，也没有被拒绝。
- *已兑现（fulfilled）*：意味着操作成功完成。
- *已拒绝（rejected）*：意味着操作失败。

![](https://www.alexlintu.com/content/images/size/w2000/2021/04/Group-74.png)
一个待定的 Promise *最终状态*可以是*已兑现*并返回一个值，或者是*已拒绝*并返回一个原因（错误）。当其中任意一种情况发生时，通过 Promise 的 \`then\` 方法串联的处理程序将被调用。如果绑定相应处理程序时 Promise 已经兑现或拒绝，这处理程序将被立即调用，因此在异步操作完成和绑定处理程序之间不存在竞态条件。

如果一个 Promise 已经被兑现或拒绝，即不再处于待定状态，那么则称之为已*敲定（settled）*。

![流程图展示了 Promise 状态在 pending、fulfilled 和 rejected 之间如何通过 then() 和 catch() 处理程序进行转换。一个待定的 Promise 可以变成已兑现或已拒绝的状态。如果 Promise 已经兑现，则会执行“on fulfillment”处理程序（即 then() 方法的第一个参数），并继续执行进一步的异步操作。如果 Promise 被拒绝，则会执行错误处理程序，可以将其作为 then() 方法的第二个参数或 catch() 方法的唯一参数来传递。](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/promises.png)

你还会听到使用*已解决*（resolved）这个术语来描述 Promise——这意味着该 Promise 已经敲定（settled），或为了匹配另一个 Promise 的最终状态而被“锁定（lock-in）”，进一步解决或拒绝它都没有影响。原始 Promise 提案中的 [States and fates](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) 文档包含了更多关于 Promise 术语的细节。在口语中，“已解决”的 Promise 通常等价于“已兑现”的 Promise，但是正如“States and fates”所示，已解决的 Promise 也可以是待定或拒绝的。例如：

JSCopy to Clipboard

\`\`\`js
new Promise((resolveOuter) => {
  resolveOuter(
    new Promise((resolveInner) => {
      setTimeout(resolveInner, 1000);
    }),
  );
});
\`\`\`

此 Promise 在创建时已经被解决（因为 \`resolveOuter\` 是同步调用的），但它是用另一个 Promise 解决的，因此在内部 Promise 兑现的 1 秒之后才会*被兑现*。在实践中，“解决”过程通常是在幕后完成的，不可观察，只有其兑现或拒绝是可观察的。

**备注：** 其他几种语言也有一些机制来实现惰性求值和延迟计算，它们也称之为“promise”，例如 Scheme。在 JavaScript 中，Promise 代表已经在进行中的进程，而且可以通过回调函数实现链式调用。如果你想要实现惰性求值，考虑使用不带参数的函数，例如 \`f = () => expression\` 来创建惰性求值表达式，然后使用 \`f()\` 立即求值。
`

export const javascript: string =
    `# JavaScript

**JavaScript**（**JS**）是一种具有[函数优先](https://developer.mozilla.org/zh-CN/docs/Glossary/First-class_Function)特性的轻量级、解释型或者说[即时编译型](https://zh.wikipedia.org/wiki/即時編譯)的编程语言。虽然作为 Web 页面中的脚本语言被人所熟知，但是它也被用到了很多[非浏览器环境](https://zh.wikipedia.org/wiki/JavaScript#其他)中，例如 [Node.js](https://developer.mozilla.org/zh-CN/docs/Glossary/Node.js)、[Apache CouchDB](https://couchdb.apache.org/)、[Adobe Acrobat](https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/) 等。进一步说，JavaScript 是一种[基于原型](https://developer.mozilla.org/zh-CN/docs/Glossary/Prototype-based_programming)、多范式、[单线程](https://developer.mozilla.org/zh-CN/docs/Glossary/Thread)的[动态](https://developer.mozilla.org/zh-CN/docs/Glossary/Dynamic_typing)语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript 的动态特性包括运行时对象的构造、变量参数列表、函数变量、动态脚本创建（通过 [\`eval\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval)）、对象内枚举（通过 [\`for...in\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in) 和 [\`Object\` 工具方法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object#静态方法)）和源代码恢复（JavaScript 函数会存储其源代码文本，可以使用 [\`toString()\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/toString) 进行检索）。

本部分文档将专注于 JavaScript 语言本身，而非局限于网页或其他运行环境。想要了解网页中特有的 [API](https://developer.mozilla.org/zh-CN/docs/Glossary/API)，请参考 [Web API](https://developer.mozilla.org/zh-CN/docs/Web/API) 以及 [DOM](https://developer.mozilla.org/zh-CN/docs/Glossary/DOM)。

[ECMAScript 语言规范（ECMAScript Language Specification）](https://tc39.es/ecma262/)（ECMA-262）和[ECMAScript 国际化 API 规范（ECMAScript Internationalization API specification）](https://tc39.es/ecma262/)（ECMA-402）是 Javascript 的标准。当某个 [ECMAScript 新特性的提案](https://github.com/tc39/proposals)已经被一些浏览器实现时，MDN 上的文档或示例就可能会涉及到这些新特性。大多数时候，处在 [stages](https://tc39.es/process-document/) 3 和 4 的新特性会被收录到文档中，且收录时间通常早于其正式发布的时间。

不要将 JavaScript 与 [Java 编程语言](https://zh.wikipedia.org/wiki/Java)混淆——**JavaScript 不是“解释型 Java”**。虽然“Java”和“JavaScript”都是 Oracle 公司在美国和其他国家注册（或未注册）的商标，但是这两门语言在语法、语义与用途方面有相当大的不同。

JavaScript 的核心语言特性（大部分是纯 [ECMAScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview)）的文档包括以下内容：

- [JavaScript 指南](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide)
- [JavaScript 参考](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference)

有关 JavaScript 规范和相关技术的更多信息，请参阅 [JavaScript 技术概述](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview)。

## [教程](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript#教程)

借助指南和教程来学习如何用 JavaScript 编程。

### [对于完全的初学者](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript#对于完全的初学者)

如果你想学习 JavaScript，却从未接触过 JavaScript 或编程，你可以投入到我们的 [JavaScript 主题学习区](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript)。下面列出了这部分的所有章节：

- [JavaScript 第一步](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps)

  回答了一些基本问题，比如“JavaScript 是什么？”、“它长什么样子？”、“它可以用来做什么？”等，同时还谈及了如变量、字符串、数值、数组等 JavaScript 的关键特性。

- [JavaScript 基本结构](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks)

  继介绍了 JavaScript 关键的基本特性后，我们需要关注常见的代码组成部分，如条件语句、循环、函数、事件等。

- [介绍 JavaScript 对象](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects)

  如果你想进一步使用它撰写更有效率的代码，理解 JavaScript 面向对象的特性是很重要的，因此我们提供了该模块来帮助你理解它。

- [异步 JavaScript](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous)

  介绍异步 Javascript，解释为什么这个特性是重要的，以及如何借助这个特性，有效解决诸如从服务器抓取资源这类潜在的阻塞操作。

- [客户端 web API](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs)

  了解 API 是什么，以及如何使用那些在开发工作中常见的 API。

### [JavaScript 指南](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript#javascript_指南)

- [JavaScript 指南](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide)

  一份更详尽的 JavaScript 指南，适用于有过 JavaScript 或其他语言编程经验的读者。

### [中级内容](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript#中级内容)

- [理解客户端 Javascript 框架](https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)

  作为现代前端 Web 开发中不可或缺的一部分，Javascript 框架给开发者提供了一套经过验证的工具，用来构建可扩展的交互式 Web 应用。在你移步一系列涵盖了当前流行前端框架的教程前，这部分内容提供了一些基础的背景知识，包括这些客户端框架是如何工作的，以及它们如何与你现有的工具集相配合。

- [重新介绍 JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_overview)

  给那些 *认为自己了解 Javascript* 的朋友们准备的 JavaScript 概述。

- [JavaScript 数据结构](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures)

  概述 JavaScript 中涉及的数据结构。

- [相同、相等的比较性判断](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness)

  JavaScript 提供了三种比较操作符，包括严格比较操作符\`===\`和非严格的比较操作符 \`==\`，以及 [\`Object.is()\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 方法。

- [属性的可枚举性和所有权](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)

  不同的逐个访问一组对象属性的方法对可枚举性和属性所有权的处理。

- [闭包](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures)

  闭包由一个函数与其本身所被定义的词法环境的结合而成。

### [高级内容](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript#高级内容)

- [继承和原型链](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)

  基于原型继承被外界广泛地误解与低估，这一版块对基于原型的继承作了阐述。

- [JavaScript 类型化数组](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Typed_arrays)

  Javascript 类型化数组提供了操作原始二进制数据的机制。

- [内存管理](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_management)

  JavaScript 中的内存生命周期和垃圾回收机制。

- [并发模型以及事件循环](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Event_loop)

  JavaScript 具有基于“事件循环”的并发模型。

## [参考](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript#参考)

浏览完整的 [JavaScript 参考](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference)文档。

- [标准对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects)

  例如 [\`Array\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)、[\`Boolean\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean)、[\`Date\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date)、[\`Error\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error)、[\`Function\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function)、[\`JSON\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON)、[\`Math\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math)、[\`Number\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number)、[\`Object\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object)、[\`RegExp\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp)、[\`String\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String)、[\`Map\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map)、[\`Set\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set)、[\`WeakMap\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap) 、[\`WeakSet\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet) 等标准内置对象。

- [表达式和运算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators)

  运算符的作用[\`instanceof\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof)、[\`typeof\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof)、[\`new\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new)、[\`this\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this)，[运算符优先级](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_precedence)，以及其他运算符。

- [语句和声明](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements)

  了解 [\`do-while\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/do...while)、[\`for-in\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in)、[\`for-of\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)、[\`try-catch\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/try...catch)、[\`let\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let)、[\`var\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/var)、[\`const\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const)、[\`if-else\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else)、[\`switch\`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switch) 以及其他语句和关键字的作用。

- [函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions)

  学习如何使用 JavaScript 函数来开发你的应用。

- [类](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes)

  JavaScript 类是进行面向对象编程最合适的方式。
`

export const css: string =
    `- # CSS：层叠样式表

  **层叠样式表**（Cascading Style Sheets，缩写为 **CSS**）是一种[样式表](https://developer.mozilla.org/zh-CN/docs/Web/API/StyleSheet)语言，用来描述 [HTML](https://developer.mozilla.org/zh-CN/docs/Web/HTML) 或 [XML](https://developer.mozilla.org/zh-CN/docs/Web/XML/XML_introduction)（包括如 [SVG](https://developer.mozilla.org/zh-CN/docs/Web/SVG)、[MathML](https://developer.mozilla.org/zh-CN/docs/Web/MathML) 或 [XHTML](https://developer.mozilla.org/zh-CN/docs/Glossary/XHTML) 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

  CSS 是**开放 Web** 的核心语言之一，并根据 [W3C 规范](https://www.w3.org/Style/CSS/#specs)在 Web 浏览器中进行了标准化。以前，CSS 规范的各个部分的开发是同步进行的，这种方式允许对最新推荐的 CSS 版本进行控制。你可能已经听说过 CSS1、CSS2.1 甚至 CSS3。但是以后将不会再有 CSS3 或者 CSS4；相反，现在的一切都是没有版本号的 CSS。

  在 CSS2.1 之后，规范的制定范围不断地增加，并且不同的 CSS 模块进展差异如此之大，以至于[按照模块来单独进行开发并发布建议](https://www.w3.org/Style/CSS/current-work)变得更加有效。W3C 现在不再对 CSS 规范进行版本控制，而是定期对 [CSS 规范的最新稳定状态](https://www.w3.org/TR/css/)和各个模块的进展用快照来记录。CSS 模块现在有版本号或者级别，例如 [CSS 颜色模块第五版](https://drafts.csswg.org/css-color-5/)。

  ## [主要资源](https://developer.mozilla.org/zh-CN/docs/Web/CSS#主要资源)

  - [CSS 介绍](https://developer.mozilla.org/zh-CN/docs/Web/CSS#css_介绍)

    如果你是 Web 开发的新手，请务必阅读我们的 [CSS 基础](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics)文章以学习 CSS 的含义和用法。

  - [CSS 教程](https://developer.mozilla.org/zh-CN/docs/Web/CSS#css_教程)

    我们的 [CSS 学习区](https://developer.mozilla.org/zh-CN/docs/Learn/CSS)包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。

  - [CSS 参考](https://developer.mozilla.org/zh-CN/docs/Web/CSS#css_参考)

    我们针对资深 Web 开发者编写的[详细参考手册](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference)，描述了 CSS 的各个属性与概念。

  ## [教程](https://developer.mozilla.org/zh-CN/docs/Web/CSS#教程)

  我们的 [CSS 学习区](https://developer.mozilla.org/zh-CN/docs/Learn/CSS) 以多模块、零基础为特色进行 CSS 的教学——这也就意味着你不需要任何知识基础。

  - [学习 CSS 第一步](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps)

    CSS（层叠样式表）用于设置网页的样式及布局——比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其他装饰性的特征。本模块将通过阐述基本原理，展示语法示例，以及如何与 HTML 相联系三方面，为你日后精通 CSS 提供一个友好的开端。

  - [CSS 构建](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks)

    本模块是[学习 CSS 第一步](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps)的延续，相信你已经熟悉了这门语言及它的语法，并拥有一些使用它的基本经验，是时候更进一步了。本模块着眼于层叠和继承、所有可用的选择器类型、单位、大小、背景、边框、调试等等。其目的在于先为你提供编写功能强大的 CSS 工具包，了解所有基础理论，之后再进行进一步的学习，诸如[样式化文本](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text)和 [CSS 布局](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout)。

  - [CSS 为文本添加样式](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text)

    在学习了 CSS 语言基础知识的基础上，你需要关注的下一个重点是样式化文本——这是使用 CSS 时最常用的场景之一。在这一模块将学习文本样式设置的基础知识，包括设置字体、粗体、斜体、行、字符间距、阴影以及其他文本属性。我们通过在页面上应用自定义的字体以及样式化的列表、链接来完善本模块。

  - [CSS 布局](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout)

    至此，我们已经了解了 CSS 的基本原理、如何设置文本样式，以及如何设置和操作内容所在的盒子。现在我们来看看如何将这些盒子放置在相对视口或另一些盒子之间的正确位置。我们到此已经覆盖了所有预备知识，因此现在能够深入学习 CSS 布局，研究不同的显示设置，学习像弹性盒（flexbox）、CSS 网格和定位这样的现代布局工具，以及一些你可能仍想了解的传统技术。

  - [解决常见的 CSS 相关问题](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Howto)

    本模块提供了一些内容链接，这些内容很好的回答了在创建网页时使用 CSS 所遇到的常见问题。

  ## [参考](https://developer.mozilla.org/zh-CN/docs/Web/CSS#参考)

  - [CSS 参考](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference)：针对资深 Web 开发者的详细参考手册，其中描述了 CSS 的各个属性和概念。
  - CSS 关键概念：
    - [语言语法和形式](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Syntax)
    - [特殊性（另译优先级）](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity)、[继承](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Inheritance)和[级联](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Cascade)
    - [盒模型](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)和[外边距合并](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
    - [包含块](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block)
    - [堆叠上下文](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)和[区块格式化上下文](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)
    - [初始值](https://developer.mozilla.org/zh-CN/docs/Web/CSS/initial_value)、[计算值](https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value)、[应用值](https://developer.mozilla.org/zh-CN/docs/Web/CSS/used_value)和[实际值](https://developer.mozilla.org/zh-CN/docs/Web/CSS/actual_value)
    - [CSS 简写属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Shorthand_properties)
    - [CSS 弹性盒子布局](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flexible_box_layout)
    - [CSS 网格布局](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout)
    - [媒体查询](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_media_queries)
    - [动画](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation)

  ## [技术手册](https://developer.mozilla.org/zh-CN/docs/Web/CSS#技术手册)

  [CSS 布局技术手册](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Layout_cookbook)的目的是将一些也许你将要在自己的网站中实现的、常用的布局模式的方法汇集在一起，并且还提供了代码使你可以在项目中作为基础来使用。这些方法突出表现了同一布局规范的不同使用方式，作为开发者你可以自由选择自己想要的方式来实现。

  ## [CSS 开发工具](https://developer.mozilla.org/zh-CN/docs/Web/CSS#css_开发工具)

  - [万维网联盟 CSS 验证服务](http://jigsaw.w3.org/css-validator/)用于检查 CSS 是否有效。这是非常有价值的调试工具。
  - [Firefox 开发工具](https://firefox-source-docs.mozilla.org/devtools-user/index.html)允许通过[页面查看器](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html)和[样式编辑器](https://firefox-source-docs.mozilla.org/devtools-user/style_editor/index.html)工具查看和实时编辑页面的 CSS 样式。
  - Firefox 的 [Web Developer 扩展](https://addons.mozilla.org/zh-CN/firefox/addon/web-developer/)也允许实时查看和编辑网站的 CSS。

  ## [自身的错误](https://developer.mozilla.org/zh-CN/docs/Web/CSS#自身的错误)

  - Firefox：[Firefox bug 1323667](https://bugzil.la/1323667)

  ## [参见](https://developer.mozilla.org/zh-CN/docs/Web/CSS#参见)

  - [CSS 演示](https://developer.mozilla.org/zh-CN/docs/Web/Demos#css)：通过探索最新的 CSS 技术的应用实例，获得创造性的提升。
  - CSS 常常应用的 Web 语言：[HTML](https://developer.mozilla.org/zh-CN/docs/Web/HTML)、[SVG](https://developer.mozilla.org/zh-CN/docs/Web/SVG)、[MathML](https://developer.mozilla.org/zh-CN/docs/Web/MathML)、[XHTML](https://developer.mozilla.org/zh-CN/docs/Glossary/XHTML) 以及 [XML](https://developer.mozilla.org/zh-CN/docs/Web/XML/XML_introduction)。
  - [StackOverflow 上 CSS 相关的问题](https://stackoverflow.com/questions/tagged/css)
`

export const html: string =
    `- - # HTML（超文本标记语言）

    **HTML**（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 [CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS)），或功能与行为（如 [JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)）。

    “超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

    HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“\`<\`”和“\`>\`”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，\`<title>\` 标签可以写成 \`<Title>\`，\`<TITLE>\` 或以任何其他方式。然而，习惯上与实践上都推荐将标签名全部小写。

    下面的文章会帮助你更好地了解 HTML。

    ## [主要资源](https://developer.mozilla.org/zh-CN/docs/Web/HTML#主要资源)

    - [HTML 介绍](https://developer.mozilla.org/zh-CN/docs/Web/HTML#html_介绍)

      如果你是 Web 开发新手，请务必阅读我们的 [HTML 基础](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics)文章来了解什么是 HTML 以及如何使用它。

    - [HTML 教程](https://developer.mozilla.org/zh-CN/docs/Web/HTML#html_教程)

      关于如何使用 HTML 的文章，教程和完整的示例，查看我们的 [HTML 学习区](https://developer.mozilla.org/zh-CN/docs/Learn/HTML)。

    - [HTML 参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML#html_参考)

      在我们丰富的 [HTML 参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference)部分中，你可以找到在 HTML 中每一个元素和属性的详细信息。

    ## [初学者教程](https://developer.mozilla.org/zh-CN/docs/Web/HTML#初学者教程)

    我们的 [HTML 学习区](https://developer.mozilla.org/zh-CN/docs/Learn/HTML) 含有许多富有特色的模块，学习者可以在没有任何先前经验的情况下从零开始，掌握 HTML。

    - [HTML 介绍](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML)

      这一模块将为你打下基础，并为进一步的学习铺平道路。在这里，你将掌握一些重要的概念和语法，学习如何将 HTML 用于文本、如何创建超链接以及运用 HTML 去构建一个网页。

    - [多媒体与嵌入内容](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding)

      这个模块将带领你探索如何使用 HTML 在你的网页中包含多媒体内容，包括通过许多不同的方式嵌入图片，以及如何嵌入视频、音频甚至整个其他网页。

    - [HTML 表格](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables)

      如何用可理解并易于访问的形式在网页中展示表格化数据一向都是个不小的挑战。这个模块涵盖了基本的表格标记，以及一些更复杂的特性，比如实现标题和总结等。

    - [HTML 表单](https://developer.mozilla.org/zh-CN/docs/Learn/Forms)

      表单是构成 Web 世界的重要组成部分——它们提供了大量你所需要用来与网站进行交互所需的功能。比如注册、登录、发送评论反馈、购买商品等等。这个模块将引导你建立一个客户端／前端部分的表单。

    - [用 HTML 解决常见问题](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Howto)

      该部分提供了一些链接，它们指向那些你在构建 Web 页面的过程中最常见的问题的解决方法：如何处理网页标题、添加图片或视频、强调某些内容、建立基本的表单等。

    ## [高级主题](https://developer.mozilla.org/zh-CN/docs/Web/HTML#高级主题)

    - [CORS 处理跨域图片](https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image)

      通过搭配 [\`crossorigin\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#crossorigin) 属性和适当的 [CORS](https://developer.mozilla.org/zh-CN/docs/Glossary/CORS) 标头，在 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img) 元素中定义的图片可以从外部来源加载并在 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas) 元素中使用，就像是从本地源加载一样。

    - [CORS 设置属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/crossorigin)

      一些提供了对 [CORS](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS) 的支持的 HTML 元素，比如 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img) 或 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video)，具有 \`crossorigin\` 元素属性／attribute（\`crossOrigin\` 对象属性／property），该属性能使你配置其跨域获取资源的请求。

    - [使用 rel="preload" 预加载页面内容](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel/preload)

      [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link) 元素的 [\`rel\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link#rel) 属性的值 \`preload\` 允许你在 HTML 的 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/head) 部分声明一些（资源）获取请求，以指定那些在页面加载后即刻需要的资源。因此在浏览器的主渲染机制介入前，这些资源会在页面加载生命周期的早期阶段进行预加载。这样可以保证这些资源可被更早使用并减少阻塞页面初次渲染的可能性，从而提升性能。这篇文章提供了关于 \`preload\` 作用机制的基本指导。

    ## [参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML#参考)

    - [HTML 参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference)

      HTML 由**元素**组成，每个元素都可以被多个**属性**修饰。HTML 文档通过[链接](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel)相互连接。

    - [HTML 元素参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)

      浏览完整的 [HTML](https://developer.mozilla.org/zh-CN/docs/Glossary/HTML) [元素](https://developer.mozilla.org/zh-CN/docs/Glossary/Element)列表。

    - [HTML 属性参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes)

      HTML 元素都含有**属性**。这些额外的属性值可以通过各种途径对元素进行配置或调整其行为。

    - [全局属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes)

      全局属性可以在所有 [HTML 元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)上进行设置，*包括那些没有在相关标准中出现的元素*。这意味着即使这些非标准元素使得文档并不符合 HTML5 标准，它们也必须允许这些属性存在。

    - [行级元素](https://developer.mozilla.org/zh-CN/docs/Glossary/Inline-level_content)和[块级元素](https://developer.mozilla.org/zh-CN/docs/Glossary/Block-level_content)

      HTML 元素通常是“行级”或“块级”元素。一个行级元素仅会占用由定义它的标签所包裹起来的空间。而一个块级元素将会占用其父元素（容器）的全部空间，也就是创建一个“块”。

    - [链接类型](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel)

      在 HTML 中，各种各样的链接类型被用来确立和定义两个文档之间的关系。可以设置链接类型的链接元素包括 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a)、[\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/area) 和 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link)。

    - [Web 媒体类型和格式指南](https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats)

      [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio) 和 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video) 元素允许你原生地播放音频和视频媒体，无需任何外部软件的支持。

    - [HTML 内容种类](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Content_categories)

      HTML 包含了几种内容，每种内容在特定的情景上下文中有效，而在其他上下文中无效。每种内容也指定了可以被它们包含的类别，以及可以或不可以在其中使用的元素。这里提供了一个关于这些类别的说明。

    - [怪异模式和标准模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)

      关于怪异模式和标准模式的历史信息。

    ## [相关主题](https://developer.mozilla.org/zh-CN/docs/Web/HTML#相关主题)

    - [使用 CSS 为 HTML 元素应用颜色](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_colors/Applying_color)

      这篇文章涵盖了大多数使用 CSS 为 HTML 内容增加颜色的方式，并列举了 HTML 文档里哪些部分可以进行上色以及这一操作需要使用哪些 CSS 属性。它包含了一些示例，配色建构工具的链接，以及其他内容。
`

export const http: string =
    `- - - # HTTP

      ***超文本传输协议\\***（HTTP）是一个用于传输超媒体文档（例如 HTML）的[应用层](https://zh.wikipedia.org/wiki/应用层)协议。它是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。HTTP 遵循经典的[客户端—服务端模型](https://zh.wikipedia.org/wiki/主從式架構)，客户端打开一个连接以发出请求，然后等待直到收到服务器端响应。HTTP 是[无状态协议](http://zh.wikipedia.org/wiki/无状态协议)，这意味着服务器不会在两个请求之间保留任何数据（状态）。

      ## [教程](https://developer.mozilla.org/zh-CN/docs/Web/HTTP#教程)

      通过以下指南和教程来学习如何使用 HTTP。

      - [HTTP 概述](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview)

        介绍了客户端 - 服务器端协议的基本特征：它能够做什么以及它的设计意图。

      - [HTTP 缓存](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching)

        缓存对高速 Web 站点来说是非常重要。这篇文章阐述了不同种类的缓存以及如何配置 HTTP 标头来控制它们。

      - [HTTP Cookie](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies)

        [RFC 6265](https://tools.ietf.org/html/rfc6265) 定义了 cookie 的工作方式。在处理 HTTP 请求时，服务器可以发送带有响应的 \`Set-Cookie\` 标头。然后，对于同一服务器发起的每一个请求，客户端都会在 HTTP 请求标头中以字段 \`Cookie\` 的形式将 cookie 的值发送过去。也可以将 cookie 设置为在特定日期过期，或限制为特定的域和路径。

      - [跨域资源共享（CORS）](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS)

        **跨站点 HTTP 请求**就是从**另一个域**，而不是资源所在的域发起的 HTTP 请求。举例来说，在域 A（\`http://domaina.example/\`）的 HTML 页面上通过 \`img\` 元素来请求域 B（\`http://domainb.foo/image.jpg\`）上的图片资源。这在当今的 Web 页面上是很常见的——加载跨站点资源，包括 CSS 样式表、图片、脚本和其他资源。CORS 允许 Web 开发人员控制其站点对跨站点请求的反应。

      - [HTTP 客户端提示（Client Hint）](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Client_hints)

        **客户端提示**是一组响应标头，服务器可以使用它来主动从客户端请求关于设备、网络、用户以及用户代理指定的首选项的信息。然后，服务器可以根据客户端选择提供的信息来确定发送哪些资源。

      - [HTTP 的演变](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP)

        简单描述了从早期版本的 HTTP 到现代 HTTP/2，新兴的 HTTP/3 以及未来版本的 HTTP 这个过程中发生的变更。

      - [Mozilla Web 安全准则](https://wiki.mozilla.org/Security/Guidelines/Web_Security)

        一系列用于帮助运营团队创建安全的 Web 应用程序的技巧。

      - [HTTP 消息](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Messages)

        描述了 HTTP/1.x 和 HTTP/2 中不同种类消息的类型和结构。

      - [典型的 HTTP 会话](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Session)

        展现并解释了一个常见 HTTP 会话的流程。

      - [HTTP/1.x 中的连接管理](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Connection_management_in_HTTP_1.x)

        描述了在 HTTP/1.x 中的三种连接管理模型，以及它们的优点和缺点。

      ## [参考](https://developer.mozilla.org/zh-CN/docs/Web/HTTP#参考)

      浏览详细的 HTTP 参考文档。

      - [HTTP 标头](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers)

        HTTP 消息标头用于描述资源或服务器或客户端的行为。标头字段保存在 [IANA 注册表](https://www.iana.org/assignments/message-headers/message-headers.xhtml#perm-headers)中。IANA 也维护一个[建议的新 HTTP 消息标头的注册表](https://www.iana.org/assignments/message-headers/message-headers.xhtml#prov-headers)。

      - [HTTP 请求方法](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods)

        可以使用 HTTP：[\`GET\`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/GET)、[\`POST\`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/POST) 方法来完成不同操作，或是一些不太常见的请求方式，像是：[\`OPTIONS\`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/OPTIONS)、[\`DELETE\`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/DELETE) 或 [\`TRACE\`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/TRACE)。

      - [HTTP 状态码](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status)

        HTTP 状态码用来表示指定的 HTTP 请求是否已成功完成。响应分为五类：信息响应、成功响应，重定向、客户端错误和服务器错误。

      - [CSP 指令](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy)

        [\`Content-Security-Policy\`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy) 响应标头字段允许网站管理员控制页面上哪些资源能够被用户代理程序加载。除了少数例外，此策略主要涉及指定服务器来源和脚本终端。

      ## [工具与资源](https://developer.mozilla.org/zh-CN/docs/Web/HTTP#工具与资源)

      有助于了解和调试 HTTP 的工具和资源。

      - [Firefox 开发者工具](https://firefox-source-docs.mozilla.org/devtools-user/index.html)

        [网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)

      - [Mozilla Observatory](https://observatory.mozilla.org/)

        一个旨在帮助开发人员，系统管理员和安全专业人员安全地配置其站点的项目。

      - [RedBot](https://redbot.org/)

        用于检查与缓存相关的 HTTP 标头的工具。

      - [浏览器的工作原理（2011）](https://web.dev/articles/howbrowserswork)

        一篇非常全面的关于浏览器内部实现与通过 HTTP 协议的请求流的文章。可以说是所有 Web 开发者的必读内容。
`

export const webDevelopment: string =
    `# Web 开发者指南

MDN 文档中有大量的指南，这些文章意在增加用例，或教你如何使用 API 接口或特性。此页面将提供到一些最流行的阅读材料的链接。

## [HTML](https://developer.mozilla.org/zh-CN/docs/Web/Guide#html)

- [使用 HTML 构建网页](https://developer.mozilla.org/zh-CN/docs/Learn/HTML)

  HTML 学习区会提供从头开始的 HTML 学习教程。

- [HTML 基础](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics)

  这篇文章将会让你对 HTML 有一个基本的了解。在遵循本指南后，你可以进一步探索 HTML 学习区的资料。

## [CSS](https://developer.mozilla.org/zh-CN/docs/Web/Guide#css)

- [学习使用 CSS 给 HTML 添加样式](https://developer.mozilla.org/zh-CN/docs/Learn/CSS)

  我们完整的 CSS 指南将带你从头开始，学习如何给文字添加样式、创建布局等更多内容。

- [CSS 布局指南](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Layout)

  MDN 上包含了很多有关 CSS 布局的指南，这个页面将它们收集到了一起。

- [使用 CSS 动画](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations)

  CSS 动画使得从一个 CSS 样式配置到另一个样式配置的动画过渡成为可能。本指南将帮助你开始使用动画属性。

## [JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/Guide#javascript)

- [JavaScript 学习区](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript)

  无论是完全的初学者，还是希望提升你的技能，这里都是好的开始。

## [媒体](https://developer.mozilla.org/zh-CN/docs/Web/Guide#媒体)

- [音视频传输](https://developer.mozilla.org/en-US/docs/Web/Media/Audio_and_video_delivery)

  我们可以通过多种方式在 Web 上传递音频和视频，从“静态”媒体文件到自适应实时流。本文旨在作为探索基于网络的媒体的各种传输机制以及与流行浏览器的兼容性的起点。

- [音视频操作](https://developer.mozilla.org/zh-CN/docs/Web/Media/Audio_and_video_manipulation)

  Web 的魅力在于你可以结合各种技术来创造新的形式。在浏览器中拥有原生音频和视频意味着我们可以使用这些诸如 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas)、[WebGL](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API) 或 [Web 音频 API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API) 的数据流技术来直接修改音视频，例如向音频添加混响或压缩效果，或向视频添加灰度或褐色滤镜。本篇文章提供了一个参考，解释了你需要做些什么。

## [API 接口](https://developer.mozilla.org/zh-CN/docs/Web/Guide#api_接口)

- [表单数据对象](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)

  [\`FormData\`](https://developer.mozilla.org/zh-CN/docs/Web/API/FormData) 对象允许你配置一组键值对并通过 \`XMLHttpRequest\` 发送它们。虽然它主要用来发送表单数据，但它也可以独立地用于传输其他带键值的数据。若将表单的编码类型设置为“multipart/form-data”，则传输的格式与表单的 \`submit()\` 方法用于发送数据的格式相同。

- [渐进式 Web 应用](https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps)

  渐进式 Web 应用（PWA）通过使用现代 Web API 和传统的渐进式策略来开发跨平台的 Web 应用程序。这些应用程序可以在任何设备上运行并提供接近原生应用程序的体验。这是一些教程来告诉你一些你需要知道的关于 PWA 的知识。

- [XML 解析和序列化](https://developer.mozilla.org/zh-CN/docs/Web/XML/Parsing_and_serializing_XML)

  Web 平台提供了解析和序列化 XML 的不同方法，每种方法都有其优点和缺点。

## [性能](https://developer.mozilla.org/zh-CN/docs/Web/Guide#性能)

- [优化和性能](https://developer.mozilla.org/zh-CN/docs/Web/Performance)

  在开发现代网络站点及应用时，使内容加载迅速高效很重要。这篇文章将会帮助你在桌面系统和手持设备上都可以提高效率。

## [字体](https://developer.mozilla.org/zh-CN/docs/Web/Guide#字体)

- [可变字体指南](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_fonts/Variable_fonts_guide)

  了解如何在你的设计中使用可变字体。

- [网络开放字体格式（WOFF）](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_fonts/WOFF)

  WOFF（网络开放字体格式）是在网络上开放给任何人免费使用的字体文件格式。

## [用户界面开发](https://developer.mozilla.org/zh-CN/docs/Web/Guide#用户界面开发)

- [用户输入和控制](https://developer.mozilla.org/en-US/docs/Learn/Forms/User_input_methods)

  现代 Web 用户输入已经超越了简单的鼠标和键盘：例如，他们在使用触摸屏。本文提供了管理用户输入和在开放网络应用中实现控制的建议，以及常见问题解答、真实世界的例子，并为需要更多底层技术详细信息的人提供了进一步的信息链接。`

export const webPerformance: string =
    `# Web 性能

  Web 性能是客观的衡量标准，是用户对加载时间和运行时的直观体验。Web 性能指页面加载到可交互和可响应所消耗的时间，以及页面在交互时的流畅度——滚动是否顺滑？按钮能否点击？弹窗能否快速打开，动画是否平滑？Web 性能既包括客观的度量如加载时间，每秒帧数和到页面可交互的时间；也包括用户的对页面内容加载时间的主观感觉。
  
  页面响应时间越长，越多的用户就会放弃该网站。重要的是，通过使体验尽可能早地变得可用和交互，同时异步地加载长尾体验部分，来最大程度地减少加载和响应时间，并添加其他功能以降低延迟。
  
  有很多工具，API 和最佳实践帮助我们测量和改进网页性能。本章对此有所讲解。
  
  ## [关键性能指南](https://developer.mozilla.org/zh-CN/docs/Web/Performance#关键性能指南)
  
  - [CSS 动画与 JavaScript 动画的性能](https://developer.mozilla.org/zh-CN/docs/Web/Performance/CSS_JavaScript_animation_performance)
  
    对众多应用程序而言，动画对提供友好的用户体验有着关键的作用。我们有很多方式生成 web 动画，比如 CSS \`transition\` 和 \`animation\` 或者基于 JavaScript 的动画（使用 \`Window.requestAnimationFrame\`）。在这篇文章中，我们分析 CSS 动画和 JavaScript 动画的性能差异。
  
  - [优化启动性能](https://developer.mozilla.org/zh-CN/docs/Web/Performance/Optimizing_startup_performance)
  
    一个在软件应用开发中经常被忽视的方面—即便在那些专注于性能优化的软件中—就是启动时的表现。你的应用需要花费多长时间启动？当应用加载时是否会卡住用户的设备或浏览器？这会让用户担心你的应用崩溃了，或者哪儿出错了。花时间确保你的应用能够更好地启动总是一个好主意。这篇文章提供了一些技巧和建议来帮助你达成这个目标，不管是在写一个新的应用还是从其他平台向 Web 移植一个应用。
  
  - [使用 dns-prefetch](https://developer.mozilla.org/zh-CN/docs/Web/Performance/dns-prefetch)
  
    **\`DNS-prefetch\`** 尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。
  
  - [关键渲染路径](https://developer.mozilla.org/zh-CN/docs/Web/Performance/Critical_rendering_path)
  
    **关键渲染路径**是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。关键渲染路径包含了 [文档对象模型](https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model)(DOM)，[CSS 对象模型](https://developer.mozilla.org/zh-CN/docs/Web/API/CSS_Object_Model) (CSSOM)，渲染树和布局。
  
  - [懒加载](https://developer.mozilla.org/zh-CN/docs/Web/Performance/Lazy_loading)
  
    **延迟加载**（懒加载）是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略。这是一种缩短[关键渲染路径](https://developer.mozilla.org/zh-CN/docs/Web/Performance/Critical_rendering_path)长度的方法，可以缩短页面加载时间。
  
  - [渲染页面：浏览器的工作原理](https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work)
  
    在浏览网页时用户希望页面的内容能够快速加载且流畅交互。因此，开发者应力争实现这两个目标。
  
  ## [初学者教程](https://developer.mozilla.org/zh-CN/docs/Web/Performance#初学者教程)
  
  MDN [Web 性能学习专区](https://developer.mozilla.org/zh-CN/docs/Learn/Performance)有着涵盖性能要素的最新教程。如果你是性能新手，请从这里开始：
  
  - [Web 性能：概述](https://developer.mozilla.org/en-US/docs/Learn/Performance/What_is_web_performance)
  
    Web 性能学习路径概述。在这里开始你的旅程。
  
  - [什么是 Web 性能？](https://developer.mozilla.org/zh-CN/docs/Learn/Performance/What_is_web_performance)
  
    该文从一个模块开始，很好地讲述了性能到底是什么——包括我们在考虑性能时需要考虑的工具、指标、API、网络和人群，以及如何使性能成为 Web 开发工作流程的一部分。
  
  - [用户如何看待性能？](https://developer.mozilla.org/zh-CN/docs/Learn/Performance/Perceived_performance)
  
    比网站在毫秒内响应速度更重要的是，用户对网站的感知速度有多快。这些感知受到页面实际加载时间、空闲、用户交互响应以及滚动和其他动画的平滑度的影响。在本文中，我们将随着最佳练习来提升用户感知（而不是实际时间）并讨论各种加载指标、动画和响应性指标。
  
  - [Web 性能基础](https://developer.mozilla.org/zh-CN/docs/Learn/Performance/Web_Performance_Basics)
  
    除了 HTML，CSS，JavaScript 和媒体文件这些前端模块之外，还有其他影响 Web 性能的因素，它们可能会导致应用程序变慢，或在主观和客观上使应用程序变快。有许多与 Web 性能相关的 API、开发人员工具、最佳实践和不当做法。我们将在基础层面上介绍这些影响因素，并提供进阶优化其中每一项性能的链接。
  
  - [HTML 性能特性](https://developer.mozilla.org/zh-CN/docs/Learn/Performance/HTML)
  
    标签的某些属性和顺序可能会影响网站性能。通过最大程度地减少 DOM 节点的数量，确保使用最佳顺序和属性，包括样式、脚本、媒体和第三方脚本等内容，可以大大改善用户体验。该文详细介绍了如何使用 HTML 来确保最佳性能。
  
  - [多媒体：图像与视频](https://developer.mozilla.org/zh-CN/docs/Learn/Performance/Multimedia)
  
    Web 性能的最小代价通常是媒体优化。基于每个用户代理的能力、大小和像素密度来服务不同的媒体文件已成为可能。另外，如从背景图像中删除音频轨迹，可进一步提升性能。该文讨论视频、音频和图像内容对性能的影响，以及确保影响尽可能小的方法。
  
  - [CSS 性能特性](https://developer.mozilla.org/zh-CN/docs/Learn/Performance/CSS)
  
    CSS 对于提高性能来说可能是一个不太重要的优化点，但是某些 CSS 特性对性能的影响比其他特性更大。在该文中，我们将研究一些影响性能的 CSS 属性，并提供样式处理的建议方法，以确保性能不受负面影响。
  
  - [JavaScript 性能最佳实践](https://developer.mozilla.org/zh-CN/docs/Learn/Performance/JavaScript)
  
    如果正确使用 JavaScript，则可以提供交互式和身临其境的 Web 体验——否则可能会严重损害下载时间、渲染时间、应用内性能、电池寿命和用户体验。该文概述了一些值得思考的 JavaScript 最佳实践，以确保即使复杂的内容也尽可能地具有高性能。
  
  - [移动端性能](https://developer.mozilla.org/zh-CN/docs/Learn/Performance/Mobile)
  
    随着移动设备上的 Web 访问普及，并且所有移动平台都具有功能完善的 Web 浏览器，但由于受限于带宽、CPU、电池续航等因素，因此考虑这些平台上 Web 内容的性能非常重要。本文着眼于特定于移动设备的性能注意事项。
  
  ## [使用 Performance API](https://developer.mozilla.org/zh-CN/docs/Web/Performance#使用_performance_api)
  
  - [Performance API](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API/Using_the_Performance_API)
  
    该指南介绍了如何使用 [High-Resolution Time](https://w3c.github.io/hr-time/) 标准中定义的 [\`Performance\`](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance) 接口。
  
  - [Resource Timing API](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API/Resource_timing)
  
    [资源加载和定时](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API/Resource_timing)加载这些资源，包括管理资源缓冲区和处理 CORS
  
  - [User Timing API](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API/User_timing)
  
    使用创建特定于应用程序的时间戳 user timing API 的“标记”和“度量”条目类型——它们是浏览器性能时间轴的一部分。
  
  - [Beacon API](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API)
  
    使用 [Beacon](https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API) 接口调度发送给服务器的异步非阻塞请求。
  
  - [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility)
  
    通过 [Intersection Observer API](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API) 学习对元素可见性的监测，并在关注的元素变得可见时被异步通知。
  
  ## [其他文档](https://developer.mozilla.org/zh-CN/docs/Web/Performance#其他文档)
  
  - [开发者工具中与性能相关的功能](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html)
  
    本节提供有关如何使用和理解开发人员工具中的性能特性的信息，包括 [Waterfall](https://profiler.firefox.com/docs/)、[Call Tree](https://profiler.firefox.com/docs/) 和 [Flame Charts](https://profiler.firefox.com/docs/)。
  
  - [使用内置分析器进行分析](https://profiler.firefox.com/docs/#/./guide-getting-started)
  
    了解如何使用 Firefox 的内置分析器来分析应用程序性能。
  
  ## [各种术语](https://developer.mozilla.org/zh-CN/docs/Web/Performance#各种术语)
  
  - [Beacon](https://developer.mozilla.org/zh-CN/docs/Glossary/Beacon)
  - [Brotli 压缩](https://developer.mozilla.org/zh-CN/docs/Glossary/Brotli_compression)
  - [客户端提示](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints)
  - [代码拆分](https://developer.mozilla.org/zh-CN/docs/Glossary/Code_splitting)
  - [CSSOM](https://developer.mozilla.org/zh-CN/docs/Glossary/CSSOM)
  - [域名分片](https://developer.mozilla.org/zh-CN/docs/Glossary/Domain_sharding)
  - [有效连接类型](https://developer.mozilla.org/en-US/docs/Glossary/Effective_connection_type)
  - [首次内容绘制](https://developer.mozilla.org/zh-CN/docs/Glossary/First_contentful_paint)
  - [首次 CPU 空闲](https://developer.mozilla.org/en-US/docs/Glossary/First_CPU_idle)
  - [首次输入延迟](https://developer.mozilla.org/en-US/docs/Glossary/First_input_delay)
  - [首次交互](https://developer.mozilla.org/en-US/docs/Glossary/First_CPU_idle)
  - [首次有效绘制](https://developer.mozilla.org/zh-CN/docs/Glossary/First_meaningful_paint)
  - [首次绘制](https://developer.mozilla.org/zh-CN/docs/Glossary/First_paint)
  - [HTTP](https://developer.mozilla.org/zh-CN/docs/Glossary/HTTP)
  - [HTTP/2](https://developer.mozilla.org/zh-CN/docs/Glossary/HTTP_2)
  - [卡顿（Jank）](https://developer.mozilla.org/zh-CN/docs/Glossary/Jank)
  - [延迟](https://developer.mozilla.org/zh-CN/docs/Glossary/Latency)
  - [懒加载](https://developer.mozilla.org/en-US/docs/Glossary/Lazy_load)
  - [长任务](https://developer.mozilla.org/en-US/docs/Glossary/Long_task)
  - [无损压缩](https://developer.mozilla.org/en-US/docs/Glossary/Lossless_compression)
  - [有损压缩](https://developer.mozilla.org/en-US/docs/Glossary/Lossy_compression)
  - [主线程](https://developer.mozilla.org/zh-CN/docs/Glossary/Main_thread)
  - [代码缩减](https://developer.mozilla.org/en-US/docs/Glossary/Minification)
  - [网络节流](https://developer.mozilla.org/en-US/docs/Glossary/Network_throttling)
  - [包](https://developer.mozilla.org/en-US/docs/Glossary/Packet)
  - [页面加载时间](https://developer.mozilla.org/en-US/docs/Glossary/Page_load_time)
  - [页面预测](https://developer.mozilla.org/en-US/docs/Glossary/Page_prediction)
  - [解析](https://developer.mozilla.org/zh-CN/docs/Glossary/Parse)
  - [感知性能](https://developer.mozilla.org/en-US/docs/Glossary/Perceived_performance)
  - [Prefetch](https://developer.mozilla.org/zh-CN/docs/Glossary/Prefetch)
  - [Prerender](https://developer.mozilla.org/en-US/docs/Glossary/Prerender)
  - [QUIC](https://developer.mozilla.org/en-US/docs/Glossary/QUIC)
  - [RAIL](https://developer.mozilla.org/zh-CN/docs/Glossary/RAIL)
  - [真实用户监控](https://developer.mozilla.org/en-US/docs/Glossary/Real_User_Monitoring)
  - [Resource Timing](https://developer.mozilla.org/en-US/docs/Glossary/Resource_Timing)
  - [来回通讯延迟（RTT）](https://developer.mozilla.org/en-US/docs/Glossary/Round_Trip_Time)
  - [Server Timing](https://developer.mozilla.org/en-US/docs/Glossary/Server_Timing)
  - [Speculative parsing](https://developer.mozilla.org/zh-CN/docs/Glossary/Speculative_parsing)
  - [速度指标](https://developer.mozilla.org/en-US/docs/Glossary/Speed_index)
  - [SSL](https://developer.mozilla.org/zh-CN/docs/Glossary/SSL)
  - [综合监控](https://developer.mozilla.org/en-US/docs/Glossary/Synthetic_monitoring)
  - [TCP 握手](https://developer.mozilla.org/en-US/docs/Glossary/TCP_handshake)
  - [TCP 慢开始](https://developer.mozilla.org/zh-CN/docs/Glossary/TCP_slow_start)
  - [第一字节时间](https://developer.mozilla.org/zh-CN/docs/Glossary/Time_to_first_byte)
  - [可交互时间](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_interactive)
  - [TLS](https://developer.mozilla.org/zh-CN/docs/Glossary/TLS)
  - [传输控制协议（TCP）](https://developer.mozilla.org/zh-CN/docs/Glossary/TCP)
  - [摇树（Tree shaking）](https://developer.mozilla.org/zh-CN/docs/Glossary/Tree_shaking)
  - [Web 性能](https://developer.mozilla.org/en-US/docs/Glossary/Web_performance)
  
  ## [参见](https://developer.mozilla.org/zh-CN/docs/Web/Performance#参见)
  
  HTML
  
  - [\`\` 元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/picture)
  - [\`\` 元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video)
  - [\`\` 元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/source)
  - \`<img> srcset\` 属性
    - [响应式图片](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
  - [使用 \`rel="preload"\` 以预加载内容](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel/preload)——https://w3c.github.io/preload/
  
  CSS
  
  - [will-change](https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change)
  - GPU v CPU
  - 布局测量
  - 字体加载最佳实践
  
  JavaScript
  
  - [DOMContentLoaded](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/DOMContentLoaded_event)
  - [垃圾回收（GC）](https://developer.mozilla.org/zh-CN/docs/Glossary/Garbage_collection)
  - [requestAnimationFrame](https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame)
  
  API
  
  - [Performance API](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API)
  - [Navigation Timing API](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API/Navigation_timing)
  - [Media Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API)
  - [Network Information API](https://developer.mozilla.org/zh-CN/docs/Web/API/Network_Information_API)
  - [PerformanceNavigationTiming](https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceNavigationTiming)
  - [Battery Status API](https://developer.mozilla.org/zh-CN/docs/Web/API/Battery_Status_API)
  - [Navigator.deviceMemory](https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/deviceMemory)
  - [Intersection Observer](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API)
  - [使用 User Timing API](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API/User_timing)
  - [Long Tasks API](https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceLongTaskTiming)
  - [High Resolution Timing API](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMHighResTimeStamp)（[https://w3c.github.io/hr-time/)](https://w3c.github.io/hr-time/)）
  - [Resource Timing API](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API/Resource_timing)
  - [Page Visibility](https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API)
  - 基于 Background Tasks API 的后台任务调度
    - [requestIdleCallback()](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback)
  - [Beacon API](https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API)
  - Resource Hints - [dns-prefetch](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control), preconnect, [prefetch](https://developer.mozilla.org/zh-CN/docs/Glossary/Prefetch), and prerender
  - [FetchEvent.preloadResponse](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent/preloadResponse)
  - [Performance Server Timing API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceServerTiming)
  
  标头
  
  - [Content-encoding](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Encoding)
  - HTTP/2
  - [gZip](https://developer.mozilla.org/zh-CN/docs/Glossary/GZip_compression)
  - 客户端提示
  
  工具
  
  - [开发者工具中的性能工具](https://profiler.firefox.com/docs/#/)
  
  额外的指标
  
  - 速度指数和感知速度指数
  
  最佳实践
  
  - [使用 Service Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers)
  - 使用 Web Worker
    - [Web Worker API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API)
  - [PWA](https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers)
  - [缓存](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching)
  - 内容分发网络（CDN）
`

export const svgNote: string =
    `# SVG：可缩放矢量图形

## [开始学习 SVG](https://developer.mozilla.org/zh-CN/docs/Web/SVG#开始学习_svg)

**可缩放矢量图形**（**Scalable Vector Graphics，SVG**）基于 [XML](https://developer.mozilla.org/zh-CN/docs/Web/XML) 标记语言，用于描述二维的[矢量图形](https://zh.wikipedia.org/wiki/矢量图形)。

作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和 [CSS](https://developer.mozilla.org/zh-CN/docs/Learn/CSS)、[DOM](https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model)、[JavaScript](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) 和 [SMIL](https://developer.mozilla.org/zh-CN/docs/Web/SVG/SVG_animation_with_SMIL) 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 [HTML](https://developer.mozilla.org/zh-CN/docs/Web/HTML) 相对于文本。

SVG 图像及其相关行为被定义于 [XML](https://developer.mozilla.org/zh-CN/docs/Web/XML/XML_introduction) 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。

和传统的点阵图像模式（如 [JPEG](https://developer.mozilla.org/zh-CN/docs/Glossary/JPEG) 和 [PNG](https://developer.mozilla.org/zh-CN/docs/Glossary/PNG)）不同的是，SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容，无需图形编辑器。通过使用合适的库进行配合，SVG 文件甚至可以随时进行本地化。

SVG 是由[万维网联盟（W3C）](https://www.w3.org/)自 1999 年开始开发的开放标准。

其他内容请查阅 [SVG 教程](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial)。

## [文档](https://developer.mozilla.org/zh-CN/docs/Web/SVG#文档)

- [SVG 元素参考](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element)

  了解每一种 SVG 元素的细节。

- [SVG 属性参考](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute)

  了解每一种 SVG 属性的细节。

- [SVG DOM 接口参考](https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model#svg_接口)

  了解有关 SVG DOM API 的全部细节。

- [在 HTML 内容中应用 SVG 效果](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)

  SVG 与 [HTML](https://developer.mozilla.org/zh-CN/docs/Glossary/HTML)、[CSS](https://developer.mozilla.org/zh-CN/docs/Glossary/CSS) 和 [JavaScript](https://developer.mozilla.org/zh-CN/docs/Glossary/JavaScript) 一起工作。

## [工具](https://developer.mozilla.org/zh-CN/docs/Web/SVG#工具)

- [SVG 测试套件](https://github.com/w3c/svgwg/wiki/Testing)
- [SVG 语法校验工具](https://validator.w3.org/#validate_by_input)

## [实例](https://developer.mozilla.org/zh-CN/docs/Web/SVG#实例)

- [SVG 创作指南](https://jwatt.org/svg/authoring/)
- [SVG 作为图片](https://developer.mozilla.org/zh-CN/docs/Web/SVG/SVG_as_an_Image)
- [使用 SMIL 的 SVG 动画](https://developer.mozilla.org/zh-CN/docs/Web/SVG/SVG_animation_with_SMIL)
- [SVG 艺术画廊](https://www1.plurib.us/svg_gallery/)
- [D3](https://d3js.org/)（用于使用 HTML、SVG 和 CSS 可视化数据的 JavaScript 库）`

export const webMedia: string =
    `# Web 媒体技术

逐年来，Web 呈现、创建并管理音频、视频和其他媒体的能力以不断增长的步伐发展。今日有着大量可用的 API、HTML 元素、DOM 界面和其他不仅仅限于完成这些任务，而是为了将媒体和其他技术联合使用以实现非凡事物的特性可供使用。这篇文章列出了可能对你掌握这些技术有帮助的多种 API 与其文档链接。

## [参考资料](https://developer.mozilla.org/zh-CN/docs/Web/Media#参考资料)

### [HTML](https://developer.mozilla.org/zh-CN/docs/Web/Media#html)

这些文章包含了供媒体开发者使用的 HTML 特性。

- [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio)

  \`<audio>\` 元素用于在 Web 上下文中播放音频。这可以用于复杂媒体的隐性目标，亦或是用户控制播放音频的可见控制。可以通过 JavaScript [\`HTMLAudioElement\`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLAudioElement) 对象访问。

- [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video)

  \`<video>\` 元素是 Web 上下文中视频内容的端点。其可以简单地用于呈现视频，亦或是流式视频的目标。\`<video>\` 也可以用于连接媒体 API 和其他 HTML 与 DOM 技术，比如 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas)（用于抓取并控制框中内容)，例如，可以通过 JavaScript [\`HTMLVideoElement\`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLVideoElement) 对象访问。

- [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/track)

  \`<track>\` 元素可以被放置在 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio) 或者 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video) 元素内部，当在媒体播放时，以提供 [WebVTT](https://developer.mozilla.org/zh-CN/docs/Web/API/WebVTT_API) 格式化字幕或标题轨道的参考。可以通过 JavaScript [\`HTMLTrackElement\`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement) 对象访问。

- [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/source)

  \`<source>\` 元素可以放在 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio) 或者 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video) 元素内部，以指定当前显示的源媒体。可以使用多个不同格式、大小、分辨率的媒体源。可以通过 JavaScript [\`HTMLSourceElement\`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSourceElement) 对象访问。

### [API 接口](https://developer.mozilla.org/zh-CN/docs/Web/Media#api_接口)

- [媒体功能 API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API)

  媒体功能 API 可以确定运行你的应用程序或网站的设备的编码和解码能力，让你实时决定使用的格式以及时机。

- [媒体捕获和流媒体 API](https://developer.mozilla.org/zh-CN/docs/Web/API/Media_Capture_and_Streams_API)

  使得串流、播放和控制本地和网络媒体成为可能的 API 参考文献。包括使用本地摄像头与麦克风来抓取视频、音频和静止图片。

- [媒体会话 API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API)

  媒体会话 API 提供了一种定制媒体通知的方法。它通过提供元数据，让用户代理显示你的网络应用程序正在播放的媒体。它还提供了行动处理程序，浏览器可以用来访问平台媒体键，如键盘、耳机、遥控器上的硬件键，以及通知区和移动设备锁屏上的软件键。

- [媒体流录制 API](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStream_Recording_API)

  媒体流录制 API 允许你捕获媒体流并处理或过滤数据，或者将其保存在磁盘上。

- [网络音频 API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API)

  网络音频 API 允许你生成、过滤并调节实时与预录的音频材料，并将其发送至 \`<audio>\` 元素、媒体流或磁盘中。

- [WebRTC](https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API)

  WebRTC（网页即时通信）可以使互联网上任意两位用户在无需媒介的情况下中串流实时音频、视频和任意数据。

## [指南](https://developer.mozilla.org/zh-CN/docs/Web/Media#指南)

- [在 HTML 中使用音频和视频资源](https://developer.mozilla.org/en-US/docs/Web/Media/HTML_media)

  这里是一篇使用 HTML \`<audio>\` 和 \`<video>\` 元素的指南。

- [Web 设计中的媒体无障碍指南](https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/Multimedia)

  在本指南中，我们将介绍 web 设计人员和开发人员创建的内容能让具有不同能力的人可以访问的方法。这个范围包括从 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img) 元素上简单地使用 [\`alt\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#alt) 属性到为屏幕阅读者提供字幕标记的媒体。

- [Web 媒体类型和格式指南](https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats)

  关于文件类型和编解码器对于 web 上的图像、音频和视频媒体有效的指南。这包括使用何种格式处理什么内容的建议、最佳实践，以及如何提供后备方案和如何对媒体类型进行优先排序，还包括针对每个媒体容器和编解码器的一般浏览器支持信息。

- [音频和视频推流](https://developer.mozilla.org/en-US/docs/Web/Media/Streaming)

  该指南涵盖了如何进行音频和视频流推送，以及你可以利用的技巧和技术，以确保你的流媒体的最佳质量和/或性能。

- [媒体和 Web 音频 API 自动播放指南](https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide)

  出乎意料的自动播放媒体或音频对用户来说可能是一个不受欢迎的惊喜。虽然自动播放是有目的的，但应该谨慎使用。为了让用户控制这一点，许多浏览器现在都提供了自动播放阻塞的形式。本文是关于自动播放的指南，提供了一些技巧，告诉你何时以及如何使用它，以及如何使用浏览器优雅地处理自动播放阻塞。

- [Web 音频空间化基础](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics)

  3D 环境既可以是渲染到屏幕上的 3D 场景，也可以是使用头盔体验的混合现实场景，重要的是音频的表现要让它听起来像来自其来源的方向。本指南涵盖了如何实现这一点。

## [其他主题](https://developer.mozilla.org/zh-CN/docs/Web/Media#其他主题)

你可能会感兴趣的相关主题，因为这些技术可以用有趣的方式与媒体 API 共同使用。

- [Canvas API](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)

  Canvas API 允许你在 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas) 上绘画、操纵并改变图像内容。这样可以与媒体以多种方式使用，包括设置 \`<canvas>\` 元素作为视频播放或摄像头捕获的终点以捕获或操纵视频帧。

- [WebGL](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API)

  WebGL 在已存在的 Canvas API 上提供了与 OpenGL ES 兼容的 API，使得在 Web 上制作强大的 3D 图像成为可能。通过一张画布，这可以用于为媒体内容添加 3D 图像。

- [WebXR](https://developer.mozilla.org/zh-CN/docs/Web/API/WebXR_Device_API)

  作为取代 WebVR API 的存在，WebXR 是一种支持创建虚拟现实（VR）和增强现实 (AR) 内容的技术。混合现实内容可以显示在设备的屏幕上，或者是显示在目镜或耳机内。

- [WebVR](https://developer.mozilla.org/zh-CN/docs/Web/API/WebVR_API) 已弃用

  Web Virtual Reality API 支持虚拟现实（VR）设备，如 Oculus Rift 或 HTC Vive，使开发人员能够将用户的位置和移动转换为 3D 场景中的移动，然后在设备上显示。WebVR 已经被 WebXR 所取代，并将从浏览器中移除。`

export const webSafety: string =
    `# Web 安全

确保你的 Web 站点或 Web 应用安全是十分重要的，即使是代码中很小的 bug 也可能导致隐私信息被泄露，黑客会尝试偷窃数据。这些文档提供信息帮助你使代码更安全。此处列出的面向 Web 安全的文章提供的信息可以帮助你保护站点及其代码免受攻击和数据窃取。

## [内容安全](https://developer.mozilla.org/zh-CN/docs/Web/Security#内容安全)

- [CSP (内容安全策略)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)

  **内容安全策略**（[CSP](https://developer.mozilla.org/zh-CN/docs/Glossary/CSP)）通过探测和减轻包括跨站脚本攻击 [XSS](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) 和数据注入攻击的攻击手段，更进一步提升安全性。上述攻击手段可以使用在数据窃取、网站污损、亦或是恶意软件的分发等场景中。

## [连接安全](https://developer.mozilla.org/zh-CN/docs/Web/Security#连接安全)

- [传输层安全（TLS）](https://developer.mozilla.org/zh-CN/docs/Web/Security/Transport_Layer_Security)

  传输层安全（[TLS](https://developer.mozilla.org/zh-CN/docs/Glossary/TLS)）协议是在两个互联的应用或设备上稳定且私密地交换信息的标准。使用 TLS 的应用可以选择对数据安全性和可靠性有保障的安全参数。这篇文章提供了 TLS 的概述，以及在保护你的内容时需要做出的选择。

- [HTTPS](https://developer.mozilla.org/zh-CN/docs/Web/Security#https)

  **HTTPS**（***超文本传输协议安全\\***）是 [HTTP](https://developer.mozilla.org/zh-CN/docs/Glossary/HTTP) 协议的加密版本，它使用 [SSL](https://developer.mozilla.org/zh-CN/docs/Glossary/SSL) 或 [TLS](https://developer.mozilla.org/zh-CN/docs/Glossary/TLS) 协议来对客户端和服务器之间的所有通信进行加密。所建立的安全连接使得客户端可以确认所连接的服务器，并且可以交换敏感数据。

- [HTTP Strict-Transport-Security](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Strict-Transport-Security)

  \`Strict-Transport-Security:\` [HTTP](https://developer.mozilla.org/zh-CN/docs/Web/HTTP) 标头可以让网站指定其只能通过 HTTPS 访问。

- [证书透明度](https://developer.mozilla.org/zh-CN/docs/Web/Security/Certificate_Transparency)

  **证书透明度**是一个开放的框架，旨在防止和监测证书的误发。新颁发的证书被记录到公开运行的、通常是独立的 CT 日志中，这些日志保持着一个仅有附录的、有密码学保证的 TLS 证书的记录。

- [混合内容](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content)

  如果一个 HTTPS 页面包含明文 HTTP 获取的内容，那么该页面就被称为**混合内容**页面。像这样的页面只能保证部分内容加密，未加密的部分仍然可以被嗅探器和中间人攻击者感知。

- [如何修复含有混合内容的网站](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content)

  如果你的网站传送了 HTTPS 页面，所有使用 HTTP 传送的[活跃混合内容](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content)默认会被阻止。因而，你的网站可能会对客户不可用（例如 iframe 或插件不加载）。[被动的混合内容](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content)默认是显示状态，但用户也可以通过首选设置来阻止这种类型的内容。这个页面解释了作为 web 开发人员需要注意的事情。

- [安全上下文](https://developer.mozilla.org/zh-CN/docs/Web/Security/Secure_Contexts)

  一个**安全的上下文**是一个 \`Window\` 或 \`Worker\`，对于它来说，有理由相信内容已经安全地通过 HTTPS/TLS 交付，并且与**不**安全的上下文进行通信的可能性有限。许多 Web API 和功能只能在安全上下文中访问。安全上下文的主要目标是防止[中间人攻击者](https://zh.wikipedia.org/wiki/中间人攻击)访问强大的 API，从而进一步损害攻击受害者。

- [限制在安全上下文中的特性](https://developer.mozilla.org/zh-CN/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts)

  该参考列出了仅在安全上下文中可用的 web 平台特性。

- [弱签名算法](https://developer.mozilla.org/zh-CN/docs/Web/Security/Weak_Signature_Algorithm)

  用于[数字证书](https://developer.mozilla.org/zh-CN/docs/Glossary/Digital_certificate)[签名](https://developer.mozilla.org/zh-CN/docs/Glossary/Signature/Security)的摘要算法是保证证书安全性的关键因素。这篇文章提供了一些有关已知的弱签名算法信息，在使用的时候可以避免它们。

- [301 和 302 响应码跳转](https://developer.mozilla.org/zh-CN/docs/Web/Security#301_和_302_响应码跳转)

  待补充

## [数据安全](https://developer.mozilla.org/zh-CN/docs/Web/Security#数据安全)

- [使用 HTTP Cookies](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies)

  *HTTP cookie*（web cookie，浏览器 cookie）是服务器发送给客户端 web 浏览器的一小块数据。浏览器可能会存储它，并在后续对同一服务器的请求中将它发送回服务器。例如，通常这可以说明两个请求来自同一个浏览器，从而让用户保持登录状态。

- [Local storage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage)

  \`Window\` 对象的 [\`Window.localStorage\`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage) 属性是一种服务器在客户端上存储持久性数据的方法，数据可以在不同的会话中持久访问。

## [信息泄露](https://developer.mozilla.org/zh-CN/docs/Web/Security#信息泄露)

- [Referer 标头策略：隐私和安全性考虑](https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns)

  有一些与 [Referer HTTP 标头](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referer)相关的隐私和安全风险。这篇文章描述了它们，并提供避免这些风险的建议。

- [Robots.txt](https://developer.mozilla.org/zh-CN/docs/Web/Security#robots.txt)

  待补充

- [Site maps](https://developer.mozilla.org/zh-CN/docs/Web/Security#site_maps)

  待补充

## [完整性](https://developer.mozilla.org/zh-CN/docs/Web/Security#完整性)

- [同源策略](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy)

  **同源策略**限制了一个[源](https://developer.mozilla.org/zh-CN/docs/Glossary/Origin)中加载的文档或脚本与其他源中的资源交互的方式。这是一种用来隔离潜在恶意文档的关键安全机制。

- [子资源完整性](https://developer.mozilla.org/zh-CN/docs/Web/Security/Subresource_Integrity)

  **子资源完整性**（SRI）是一种安全功能，允许浏览器验证所获取的文件（比如，从一个[内容分发网络](https://developer.mozilla.org/zh-CN/docs/Glossary/CDN)中）没有遭受恶意修改。它的工作原理是允许你提供一个加密哈希值，目标文件必须匹配这个值。

- [HTTP Access-Control-Allow-Origin](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)

  **\`Access-Control-Allow-Origin\`** 响应头表明响应是否可以与来自给定[来源](https://developer.mozilla.org/zh-CN/docs/Glossary/Origin)的请求代码共享。

- [HTTP X-Content-Type-Options](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Content-Type-Options)

  **\`X-Content-Type-Options\`** 响应的 HTTP 头是一个标记，由服务器用来表示应该遵循 [\`Content-Type\`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Type) 头中宣告的 [MIME 类型](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)，不应该被改变。这是一种选择退出 [MIME 类型嗅探](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#mime_sniffing)的方法，或者换句话说，MIME 类型是故意配置的。

## [点击劫持保护](https://developer.mozilla.org/zh-CN/docs/Web/Security#点击劫持保护)

[点击劫持](https://developer.mozilla.org/zh-CN/docs/Glossary/Clickjacking)描述了用户被愚弄，点击了一个产生用户意料之外行为的 UI 元素的现象。

- [HTTP X-Frame-Options](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options)

  **\`X-Frame-Options\`** [HTTP](https://developer.mozilla.org/zh-CN/docs/Web/HTTP) 响应头可以用来表明是否应该允许浏览器在 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/frame)、[\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)、[\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed) 或 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/object) 中渲染页面。网站通过这些方法，保证它们的内容不被轻易嵌入至其他站点，可以避免[点击劫持](https://developer.mozilla.org/zh-CN/docs/Glossary/Clickjacking)攻击。

- [CSP: frame-ancestors](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)

  HTTP [\`Content-Security-Policy\`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy)（CSP）的 **\`frame-ancestors\`** 指令指定了使用 [\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/frame)、[\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)、[\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/object) 或[\`\`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed) 元素嵌入页面的合法父元素。

## [用户信息安全](https://developer.mozilla.org/zh-CN/docs/Web/Security#用户信息安全)

- [不安全的密码](https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords)

  通过 HTTP 提供登录表格是特别危险的，因为有各种各样的攻击可以用来提取用户的密码。网络窃听者可以通过嗅探网络，或通过修改传输中的服务页面来窃取用户的密码。

- [隐私性和 :visited 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Privacy_and_the_:visited_selector)

  在大约 2010 年之前，[CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS) [\`:visited\`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited) 选择器允许网站获取用户的浏览历史，弄清用户访问过哪些网站。为了缓解这个问题，浏览器已经限制了从访问过的链接中获得的信息量。

## [与安全相关的术语](https://developer.mozilla.org/zh-CN/docs/Web/Security#与安全相关的术语)

- [Block cipher mode of operation](https://developer.mozilla.org/zh-CN/docs/Glossary/Block_cipher_mode_of_operation)
- [认证机构](https://developer.mozilla.org/zh-CN/docs/Glossary/Certificate_authority)
- [挑战—响应认证](https://developer.mozilla.org/zh-CN/docs/Glossary/Challenge)
- [密码](https://developer.mozilla.org/zh-CN/docs/Glossary/Cipher)
- [密码套件](https://developer.mozilla.org/zh-CN/docs/Glossary/Cipher_suite)
- [密文](https://developer.mozilla.org/zh-CN/docs/Glossary/Ciphertext)
- [Clickjacking](https://developer.mozilla.org/zh-CN/docs/Glossary/Clickjacking)
- [跨源资源共享](https://developer.mozilla.org/zh-CN/docs/Glossary/CORS)
- [CORS-safelisted request header](https://developer.mozilla.org/zh-CN/docs/Glossary/CORS-safelisted_request_header)
- [CORS-safelisted response header](https://developer.mozilla.org/zh-CN/docs/Glossary/CORS-safelisted_response_header)
- [跨站脚本攻击](https://developer.mozilla.org/zh-CN/docs/Glossary/Cross-site_scripting)
- [密码分析学](https://developer.mozilla.org/en-US/docs/Glossary/Cryptanalysis)
- [Cryptographic hash function](https://developer.mozilla.org/zh-CN/docs/Glossary/Cryptographic_hash_function)
- [密码学](https://developer.mozilla.org/zh-CN/docs/Glossary/Cryptography)
- [内容安全策略](https://developer.mozilla.org/zh-CN/docs/Glossary/CSP)
- [跨站请求伪造](https://developer.mozilla.org/zh-CN/docs/Glossary/CSRF)
- [解密](https://developer.mozilla.org/zh-CN/docs/Glossary/Decryption)
- [数字证书](https://developer.mozilla.org/zh-CN/docs/Glossary/Digital_certificate)
- [DTLS](https://developer.mozilla.org/en-US/docs/Glossary/DTLS)
- [加密](https://developer.mozilla.org/zh-CN/docs/Glossary/Encryption)
- [Forbidden header name](https://developer.mozilla.org/zh-CN/docs/Glossary/Forbidden_header_name)
- [Forbidden response header name](https://developer.mozilla.org/zh-CN/docs/Glossary/Forbidden_response_header_name)
- [Hash](https://developer.mozilla.org/zh-CN/docs/Glossary/Hash)
- [HMAC](https://developer.mozilla.org/zh-CN/docs/Glossary/HMAC)
- [HPKP](https://developer.mozilla.org/en-US/docs/Glossary/HPKP)
- [HSTS](https://developer.mozilla.org/zh-CN/docs/Glossary/HSTS)
- [HTTPS](https://developer.mozilla.org/zh-CN/docs/Glossary/HTTPS)
- [密钥](https://developer.mozilla.org/zh-CN/docs/Glossary/Key)
- [中间人攻击](https://developer.mozilla.org/zh-CN/docs/Glossary/MitM)
- [OWASP](https://developer.mozilla.org/en-US/docs/Glossary/OWASP)
- [预检请求](https://developer.mozilla.org/zh-CN/docs/Glossary/Preflight_request)
- [非对称密钥算法](https://developer.mozilla.org/en-US/docs/Glossary/Public-key_cryptography)
- [Reporting directive](https://developer.mozilla.org/en-US/docs/Glossary/Reporting_directive)
- [Robots.txt](https://developer.mozilla.org/en-US/docs/Glossary/Robots.txt)
- [同源策略](https://developer.mozilla.org/zh-CN/docs/Glossary/Same-origin_policy)
- [会话劫持](https://developer.mozilla.org/en-US/docs/Glossary/Session_Hijacking)
- [SQL 注入](https://developer.mozilla.org/zh-CN/docs/Glossary/SQL_Injection)
- [对称密钥算法](https://developer.mozilla.org/en-US/docs/Glossary/Symmetric-key_cryptography)
- [TOFU](https://developer.mozilla.org/en-US/docs/Glossary/TOFU)
- [TLS](https://developer.mozilla.org/zh-CN/docs/Glossary/TLS)

## [参见](https://developer.mozilla.org/zh-CN/docs/Web/Security#参见)

- [Mozilla 安全博客](https://blog.mozilla.org/security/)
- [Twitter 上的 @mozsec 账号](https://twitter.com/mozsec)`
